<template>
	<view style="display: inline-block;" :style="{ marginLeft: isList ? '22rpx' : '0' }" @click="goPage('/pages/goods/GoodsDetail?id=' + item.id)">
		<view class="goods_item_justify clearfix" v-if="isList">
			<view class="imgStyle float_left"><image mode="aspectFill" :src="item.images[0]"></image></view>
			<view class="float_right goods-info">
				<view class="title ellipsis">{{ item.title }}</view>
				<view class="unit">{{ item.describe }}</view>
				<view class="price clearfix primary-color">
					<view class="float_left" v-if="isShowPrice">
						<text class="rmb-icon">￥</text>
						<text>{{ item.minSalePrice }}</text>
						<text class="market-price">¥{{ item.maxMarketPrice }}</text>
					</view>
					<view class="float_left" v-else><text>请登录</text></view>
					<view class="float_right" @click.stop="handelAddCart"><text class="ibonfont ibongouwuche1 cart-icon"></text></view>
				</view>
			</view>
		</view>
		<view class="goods_item_align" v-else>
			<view class="img_style"><image mode="aspectFill" :src="item.images[0]"></image></view>
			<view class="goods-info">
				<view class="title_align ellipsis">{{ item.title }}</view>
				<view class="unit_align">{{ item.describe }}</view>
				<view class="price_align clearfix">
					<view class="float_left">
						<view class="now-price" v-if="isShowPrice">
							<text class="rmb-icon">￥</text>
							<text>{{ item.minSalePrice }}</text>
						</view>
						<view class="now-price" v-else><text>请登录</text></view>
						<!-- <view class="price_tip">
							<text>￥</text>
							<text>{{ item.maxMarketPrice }}</text>
						</view> -->
					</view>
					<view class="float_right" @click.stop="handelAddCart"><text class="ibonfont ibongouwuche1 cart-icon"></text></view>
				</view>
			</view>
		</view>
		<NoLoginTip v-if="tip_show === true" :show="tip_show" @cancel="tip_show = false"></NoLoginTip>
	</view>
</template>

<script>
import NoLoginTip from '@/components/NoLoginTip.vue';
export default {
	components: {
		NoLoginTip
	},
	data() {
		return {
			tip_show: false
		};
	},
	computed: {
		hasLogin() {
			return this.$store.state.hasLogin;
		},
		isShowPrice() {
			const isShowPrice = this.$store.state.basicSet.goodsPrice || 5;
			if (this.$store.state.hasLogin) {
				return true;
			} else {
				return parseInt(isShowPrice) === 5;
			}
		}
	},
	props: {
		isList: {
			type: Boolean,
			default: false
		},
		item: {
			type: Object,
			default: () => {
				return {
					images: ['https://cdn.uviewui.com/uview/example/fade.jpg'],
					title: '商品名称商品名称商品名称商品名称商品名称商品名称',
					describe: 'describedescribedescribedescribe',
					id: 1
				};
			}
		},
		index: {
			type: [String, Number],
			default: 0
		}
	},
	methods: {
		// 加入购物车
		handelAddCart() {
			if (!this.hasLogin) {
				this.tip_show = true;
				return;
			}
			if (this.item.specType === 4) {
				this.getGoodsDetail();
			} else {
				this.$emit('addCart', this.item);
			}
		},
		//  获取商品详情
		getGoodsDetail(id) {
			this.$u.api.getGoodsDetail(this.item.id).then(({ data }) => {
				this.addCart(data.specMultiple[0].skuId);
			});
		},
		addCart(skuId) {
			this.$u.api
				.addCart({
					goodsId: this.item.id,
					skuId: skuId,
					buyNum: 1
				})
				.then(res => {
					this.$u.toast('已加入购物车');
				});
		}
	}
};
</script>

<style lang="scss">
.goods_item_justify {
	background-color: #ffffff;
	padding: 30upx 22upx;
	width: 706upx;
	margin: 0 auto 20upx;
	border-radius: 12upx;
	.imgStyle {
		image {
			height: 160upx;
			width: 160upx;
			border-radius: 10upx;
			display: block;
		}
	}
	.goods-info {
		width: 476upx;
		.title {
			font-size: 28upx;
			width: 100%;
			height: 80upx;
			line-height: 40upx;
		}
		.unit {
			font-size: 24upx;
			color: #999999;
			width: 100%;
			height: 32upx;
			line-height: 32upx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin: 8upx 0;
		}

		.price {
			color: $price-color;
			font-size: 32upx;
			.rmb-icon {
				font-size: 24upx;
				font-weight: 400;
			}
			.cart-icon {
				font-size: 40upx;
			}
			.market-price {
				color: #999999;
				text-decoration: line-through;
				font-size: 24upx;
				margin-left: 10upx;
			}
		}
	}
}

.goods_item_align {
	width: 342upx;
	margin-left: 22upx;
	margin-bottom: 20upx;
	background-color: #ffffff;
	border-radius: 10upx;
	overflow: hidden;
	.img_style {
		image {
			width: 100%;
			height: 340upx;
			display: block;
		}
	}
	.goods-info {
		padding: 20upx;
		.title_align {
			font-size: 26upx;
			width: 100%;
			height: 72upx;
			line-height: 36upx;
		}

		.unit_align {
			font-size: 24upx;
			height: 32upx;
			line-height: 32upx;
			color: #999999;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin: 8upx 0;
		}

		.price_align {
			color: $price-color;
			font-size: 28upx;
			.now-price {
				display: inline-block;
				font-size: 32upx;
				.rmb-icon {
					font-size: 24upx;
					font-weight: 400;
				}
			}
			.price_tip {
				display: inline-block;
				font-size: 24upx;
				margin-left: 10upx;
				color: #999999;
				text-decoration: line-through;
			}
			.cart-icon {
				font-size: 40upx;
			}
		}
	}
}
</style>
